<script setup lang="ts">
import { ChevronRight, DotsVertical, Trash, Edit } from '@vicons/tabler'
import { NIcon, NInput, NButton, NDropdown } from 'naive-ui'
import { ref, computed, h } from 'vue'

interface Props {
  groupName: string
}

const props = withDefaults(defineProps<Props>(), {
  groupName: ''
})

const emit = defineEmits<{
  (e: 'update:groupName', value: string): void
}>()

const isExpanded = ref(true)
const isEditing = ref(false)

const groupNameValue = computed({
  get: () => props.groupName,
  set: (val: string) => emit('update:groupName', val)
})

const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

const startEditing = () => {
  isEditing.value = true
}

const saveGroupName = () => {
  isEditing.value = false
}

const actionList = [
  {
    key: 'edit',
    label: '编辑',
    icon: () => h(NIcon, null, { default: () => h(Edit) })
  },
  {
    key: 'delete',
    label: () => h('span', { class: 'text-red-500' }, '删除'),
    icon: () => h(NIcon, null, { default: () => h(Trash, { class: 'text-red-500' }) })
  }
]

const handleAction = (key: string) => {
  if (key === 'edit') {
    startEditing()
  } else if (key === 'delete') {
    console.log('删除操作')
  }
}
</script>

<template>
  <div class="chat-list-group">
    <div class="chat-list-group-header">
      <div v-if="!isEditing" class="chat-list-group-header__title">
        <span>{{ props.groupName }}</span>
      </div>
      <div v-else class="chat-list-group-header__edit">
        <NInput v-model:value="groupNameValue" size="small" />
        <NButton size="small" @click="saveGroupName">保存</NButton>
      </div>
      <div class="chat-list-group-header-tools">
        <NDropdown trigger="click" :options="actionList" @select="handleAction">
          <NIcon size="20">
            <DotsVertical />
          </NIcon>
        </NDropdown>
        <div
          class="chat-list-group-header-tools__trigger"
          :class="{ 'rotate-90': !isExpanded }"
          @click="toggleExpand"
        >
          <NIcon size="20">
            <ChevronRight />
          </NIcon>
        </div>
      </div>
    </div>
    <div
      class="chat-list-group-body"
      :class="{ 'chat-list-group-body__hide': !isExpanded }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat-list-group {
  margin: 10px 0;

  &-header {
    display: flex;
    align-items: center;
    padding: 5px;
    justify-content: space-between;
    cursor: pointer;
    border-radius: 4px;

    &:hover {
      background-color: #f5f5f5;
    }

    &__title {
      font-size: 14px;
      font-weight: bold;
      
      span {
        margin-left: 5px;
        color: #666;
      }
    }

    &__edit {
      display: flex;
      align-items: center;
      
      .n-input {
        margin-right: 5px;
      }
      
      .n-button {
        margin-left: 5px;
      }
    }

    &-tools {
      display: flex;
      align-items: center;

      &__trigger {
        display: flex;
        align-items: center;
        transition: transform 0.3s;

        &.rotate-90 {
          transform: rotate(90deg);
        }
      }
    }
  }

  &-body {
    opacity: 1;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
    max-height: 1000px;

    &__hide {
      opacity: 0;
      max-height: 0;
    }
  }
}
</style>